<template>
  <div class="app-layout">
    <!-- Sidebar Navigation -->
    <aside class="sidebar">
      <div class="logo">
        <div class="logo-icon">🏕️</div>
        <div class="logo-text">DevOps自动化运维系统</div>
      </div>
      
      <nav class="nav-menu">
        <div v-for="group in menuGroups" :key="group.title" class="menu-group">
          <div 
            class="menu-group-header" 
            @click="toggleGroup(group.title)"
            :class="{ collapsed: collapsedGroups[group.title] }"
          >
            <span class="group-icon">{{ group.icon }}</span>
            <span class="group-title">{{ group.title }}</span>
            <span class="group-arrow">{{ collapsedGroups[group.title] ? '▼' : '▲' }}</span>
          </div>
          <transition name="menu-slide">
            <div v-show="!collapsedGroups[group.title]" class="menu-group-items">
              <router-link 
                v-for="item in group.items" 
                :key="item.path"
                :to="item.path" 
                class="menu-item"
                :class="{ active: $route.path === item.path }"
              >
                <span class="menu-item-icon">{{ item.icon }}</span>
                <span class="menu-item-text">{{ item.title }}</span>
              </router-link>
            </div>
          </transition>
        </div>
      </nav>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
      <!-- Top Bar -->
      <header class="top-bar">
        <div class="top-bar-left">
          <h1 class="page-title">{{ currentPageTitle }}</h1>
        </div>
        <div class="top-bar-right">
          <div class="user-menu" @click="toggleUserMenu" v-click-outside="closeUserMenu">
            <div class="user-avatar">
              <img v-if="currentUser?.avatar" :src="currentUser.avatar" alt="头像" />
              <span v-else class="avatar-placeholder">{{ currentUser?.username?.charAt(0).toUpperCase() || 'U' }}</span>
            </div>
            <div class="user-info">
              <span class="username">{{ currentUser?.username || '用户' }}</span>
              <span v-if="currentUser?.is_superuser" class="badge-admin">管理员</span>
            </div>
            <span class="dropdown-arrow">▼</span>
            
            <transition name="dropdown">
              <div v-if="showUserMenu" class="user-dropdown">
                <div class="dropdown-item" @click.stop="openProfileModal">
                  <span class="item-icon">👤</span>
                  <span>个人信息</span>
                </div>
                <div class="dropdown-item" @click.stop="openRegisterModal" v-if="currentUser?.is_superuser">
                  <span class="item-icon">➕</span>
                  <span>注册新用户</span>
                </div>
                <div class="dropdown-divider"></div>
                <div class="dropdown-item danger" @click.stop="handleLogout">
                  <span class="item-icon">🚪</span>
                  <span>登出</span>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </header>

      <!-- Page Content -->
      <div class="page-content">
        <router-view />
      </div>
    </main>

    <!-- 个人信息弹窗 -->
    <div v-if="showProfileModal" class="modal-overlay" @click="closeProfileModal">
      <div class="modal-content profile-modal" @click.stop>
        <h3>👤 个人信息</h3>
        <form @submit.prevent="updateProfile">
          <div class="profile-avatar-section">
            <div class="avatar-preview">
              <img v-if="profileForm.avatar || currentUser?.avatar" 
                   :src="profileForm.avatar || currentUser?.avatar" 
                   alt="头像" />
              <span v-else class="avatar-placeholder-large">
                {{ currentUser?.username?.charAt(0).toUpperCase() || 'U' }}
              </span>
            </div>
            <div class="avatar-upload">
              <label for="avatar-input" class="upload-btn">
                📷 上传头像
                <input 
                  id="avatar-input" 
                  type="file" 
                  accept="image/*" 
                  @change="handleAvatarUpload" 
                  style="display: none;"
                />
              </label>
              <p class="upload-hint">支持 JPG、PNG，小于 2MB</p>
            </div>
          </div>
          
          <div class="form-group">
            <label>用户名</label>
            <input v-model="profileForm.username" disabled />
          </div>
          
          <div class="form-group">
            <label>邮箱</label>
            <input v-model="profileForm.email" type="email" />
          </div>
          
          <div class="form-group">
            <label>姓名</label>
            <input v-model="profileForm.first_name" />
          </div>
          
          <div class="password-section">
            <h4>🔐 修改密码</h4>
            <div class="form-group">
              <label>旧密码</label>
              <input v-model="profileForm.old_password" type="password" placeholder="如需修改密码，请输入旧密码" />
            </div>
            <div class="form-group">
              <label>新密码</label>
              <input v-model="profileForm.new_password" type="password" placeholder="留空则不修改" />
            </div>
            <div class="form-group">
              <label>确认新密码</label>
              <input v-model="profileForm.confirm_password" type="password" placeholder="再次输入新密码" />
            </div>
          </div>
          
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
            <button type="button" @click="closeProfileModal" class="btn">取消</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 注册新用户弹窗 -->
    <div v-if="showRegisterModal" class="modal-overlay" @click="closeRegisterModal">
      <div class="modal-content register-modal" @click.stop>
        <h3>➕ 注册新用户</h3>
        <form @submit.prevent="registerNewUser">
          <div class="form-group">
            <label>用户名 *</label>
            <input v-model="registerForm.username" required />
          </div>
          
          <div class="form-group">
            <label>密码 *</label>
            <input v-model="registerForm.password" type="password" required />
          </div>
          
          <div class="form-group">
            <label>确认密码 *</label>
            <input v-model="registerForm.confirmPassword" type="password" required />
          </div>
          
          <div class="form-group">
            <label>邮箱</label>
            <input v-model="registerForm.email" type="email" />
          </div>
          
          <div class="form-group">
            <label>姓名</label>
            <input v-model="registerForm.first_name" />
          </div>
          
          <div class="form-group-checkbox">
            <label>
              <input type="checkbox" v-model="registerForm.is_superuser" />
              管理员权限
            </label>
          </div>
          
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">注册</button>
            <button type="button" @click="closeRegisterModal" class="btn">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '../services/api'
import confirmDialog from '../utils/confirmDialog'

const route = useRoute()
const router = useRouter()

const currentUser = ref(null)
const collapsedGroups = ref({})
const showUserMenu = ref(false)
const showProfileModal = ref(false)
const showRegisterModal = ref(false)

const profileForm = ref({
  username: '',
  email: '',
  first_name: '',
  avatar: '',
  old_password: '',
  new_password: '',
  confirm_password: ''
})

const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  first_name: '',
  is_superuser: false
})

// 菜单分组配置
const menuGroups = [
  {
    title: 'CMDB资产管理',
    icon: '🗄️',
    items: [
      { path: '/dashboard', title: '系统仪表盘', icon: '📊' },
      { path: '/performance-trend', title: '性能趋势分析', icon: '📈' },
      { path: '/hosts', title: '主机管理', icon: '🖥️' },
      { path: '/ssh-manager', title: 'SSH连接管理', icon: '⚡' },
      { path: '/host-groups', title: '主机组管理', icon: '💎' },
      { path: '/projects', title: '项目管理', icon: '📁' },
      { path: '/environments', title: '环境管理', icon: '🌍' }
    ]
  },
  {
    title: 'Ansible管理',
    icon: '🚀',
    items: [
      { path: '/ansible/inventories', title: '配置管理', icon: '📋' },
      { path: '/ansible/credentials', title: '凭据管理', icon: '🔑' },
      { path: '/ansible/adhoc', title: 'Ad-hoc执行', icon: '⚡' },
      { path: '/ansible/playbooks', title: 'Playbook执行', icon: '▶️' }
    ]
  },
  {
    title: '任务历史',
    icon: '📜',
    items: [
      { path: '/ansible/jobs', title: 'Ansible任务', icon: '🚀' },
      { path: '/audit-log', title: '日志审计', icon: '📋' }
    ]
  },
  {
    title: '系统管理',
    icon: '⚙️',
    items: [
      { path: '/users', title: '用户管理', icon: '👤' },
      { path: '/user-groups', title: '用户组管理', icon: '👥' },
      { path: '/roles', title: '角色管理', icon: '🎭' },
      { path: '/email-config', title: '邮箱配置', icon: '📧' }
    ]
  }
]

const currentPageTitle = computed(() => {
  return route.meta.title || 'CMDB资产管理'
})

// 切换菜单组折叠状态
const toggleGroup = (groupTitle) => {
  collapsedGroups.value[groupTitle] = !collapsedGroups.value[groupTitle]
}

// 获取当前用户信息
const fetchCurrentUser = async () => {
  try {
    // 先从localStorage获取
    const storedUser = localStorage.getItem('user')
    if (storedUser) {
      currentUser.value = JSON.parse(storedUser)
    }
    
    // 从API获取最新信息
    const user = await api.getCurrentUser()
    currentUser.value = user
    localStorage.setItem('user', JSON.stringify(user))
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 登出
const handleLogout = async () => {
  const confirmed = await confirmDialog.show({
    title: '确认登出',
    message: '确定要退出登录吗？\n退出后需要重新登录哦～'
  })
  
  if (confirmed) {
    try {
      await api.logout()
    } catch (error) {
      console.error('登出失败:', error)
    } finally {
      // 清除本地存储
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      // 跳转到登录页
      router.push('/login')
    }
  }
}

// 用户菜单控制
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

const closeUserMenu = () => {
  showUserMenu.value = false
}

// 打开个人信息弹窗
const openProfileModal = () => {
  profileForm.value = {
    username: currentUser.value?.username || '',
    email: currentUser.value?.email || '',
    first_name: currentUser.value?.first_name || '',
    avatar: currentUser.value?.avatar || '',
    old_password: '',
    new_password: '',
    confirm_password: ''
  }
  showProfileModal.value = true
  closeUserMenu()
}

const closeProfileModal = () => {
  showProfileModal.value = false
}

// 更新个人信息
const updateProfile = async () => {
  try {
    // 验证密码
    if (profileForm.value.new_password || profileForm.value.old_password) {
      if (!profileForm.value.old_password) {
        alert('请输入旧密码')
        return
      }
      if (!profileForm.value.new_password) {
        alert('请输入新密码')
        return
      }
      if (profileForm.value.new_password !== profileForm.value.confirm_password) {
        alert('两次输入的新密码不一致')
        return
      }
      if (profileForm.value.new_password.length < 6) {
        alert('新密码长度不能少于6位')
        return
      }
    }
    
    const updateData = {
      email: profileForm.value.email,
      first_name: profileForm.value.first_name,
      avatar: profileForm.value.avatar
    }
    
    // 如果要修改密码，添加密码字段
    if (profileForm.value.new_password) {
      updateData.old_password = profileForm.value.old_password
      updateData.new_password = profileForm.value.new_password
    }
    
    const result = await api.updateCurrentUser(updateData)
    currentUser.value = result
    localStorage.setItem('user', JSON.stringify(result))
    alert('个人信息更新成功！')
    closeProfileModal()
  } catch (error) {
    console.error('更新失败:', error)
    alert('更新失败: ' + (error.response?.data?.error || error.message))
  }
}

// 头像上传
const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  // 检查文件大小（2MB）
  if (file.size > 2 * 1024 * 1024) {
    alert('图片大小不能超过 2MB')
    return
  }
  
  // 检查文件类型
  if (!file.type.startsWith('image/')) {
    alert('只能上传图片文件')
    return
  }
  
  // 转换为Base64
  const reader = new FileReader()
  reader.onload = (e) => {
    profileForm.value.avatar = e.target.result
  }
  reader.readAsDataURL(file)
}

// 打开注册弹窗
const openRegisterModal = () => {
  registerForm.value = {
    username: '',
    password: '',
    confirmPassword: '',
    email: '',
    first_name: '',
    is_superuser: false
  }
  showRegisterModal.value = true
  closeUserMenu()
}

const closeRegisterModal = () => {
  showRegisterModal.value = false
}

// 注册新用户
const registerNewUser = async () => {
  // 验证密码
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    alert('两次输入的密码不一致！')
    return
  }
  
  if (registerForm.value.password.length < 6) {
    alert('密码长度不能少于6位')
    return
  }
  
  try {
    await api.register({
      username: registerForm.value.username,
      password: registerForm.value.password,
      email: registerForm.value.email,
      first_name: registerForm.value.first_name,
      is_superuser: registerForm.value.is_superuser
    })
    alert('用户注册成功！')
    closeRegisterModal()
  } catch (error) {
    console.error('注册失败:', error)
    alert('注册失败: ' + (error.response?.data?.error || error.response?.data?.username?.[0] || error.message))
  }
}

// 自定义指令：点击外部关闭
const vClickOutside = {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value()
      }
    }
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent)
  }
}

onMounted(() => {
  fetchCurrentUser()
})
</script>

<style scoped>
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar Styles */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, 
    rgba(45, 55, 72, 0.98) 0%,
    rgba(55, 65, 85, 0.98) 50%,
    rgba(45, 55, 72, 0.98) 100%
  );
  border-right: 2px solid rgba(255, 182, 193, 0.3);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 30px rgba(255, 182, 193, 0.15);
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, 
    rgba(255, 182, 193, 0.6) 0%,
    rgba(135, 206, 250, 0.6) 50%,
    rgba(255, 182, 193, 0.6) 100%
  );
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.5);
}

.logo {
  padding: 25px 20px;
  border-bottom: 2px solid var(--color-border);
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.1), rgba(135, 206, 250, 0.1));
  position: relative;
  overflow: hidden;
}

.logo::before {
  content: '⛺';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 80px;
  opacity: 0.05;
  transform: rotate(15deg);
}

.logo-icon {
  font-size: 48px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(255, 182, 193, 0.5));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.logo-text {
  font-size: 12px;
  color: #FFB6C1;
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.5;
}

.nav-menu {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
}

.menu-group {
  margin-bottom: 10px;
}

/* 菜单组头部 */
.menu-group-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(90deg, rgba(255, 182, 193, 0.2), rgba(135, 206, 250, 0.1));
  border-left: 3px solid rgba(255, 182, 193, 0.8);
  user-select: none;
  margin-bottom: 5px;
}

.menu-group-header:hover {
  background: linear-gradient(90deg, rgba(255, 182, 193, 0.3), rgba(135, 206, 250, 0.15));
  border-left-color: rgba(255, 182, 193, 1);
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.3);
}

.menu-group-header.collapsed {
  border-left-color: rgba(135, 206, 250, 0.7);
  background: rgba(135, 206, 250, 0.1);
}

.group-icon {
  font-size: 22px;
  margin-right: 12px;
}

.group-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #FFB6C1;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.group-arrow {
  font-size: 12px;
  color: var(--color-accent-red);
  transition: transform 0.3s ease;
}

/* 菜单组子项容器 */
.menu-group-items {
  background: rgba(0, 0, 0, 0.2);
  border-left: 2px solid rgba(0, 255, 200, 0.2);
  margin-left: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 30px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.menu-item:hover {
  background: linear-gradient(90deg, rgba(255, 182, 193, 0.25), rgba(135, 206, 250, 0.15));
  color: #FFC8D3;
  padding-left: 35px;
  border-left-color: rgba(255, 182, 193, 0.7);
}

.menu-item.active {
  background: linear-gradient(90deg, rgba(255, 182, 193, 0.35), rgba(135, 206, 250, 0.2));
  color: #FFD0DC;
  border-left-color: rgba(255, 182, 193, 1);
  font-weight: 600;
  padding-left: 35px;
  box-shadow: inset 0 0 15px rgba(255, 182, 193, 0.2);
}

.menu-item.active::before {
  content: '🏕️';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.8));
}

.menu-item-icon {
  font-size: 18px;
  margin-right: 10px;
}

.menu-item-text {
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* 折叠动画 */
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.menu-slide-enter-from,
.menu-slide-leave-to {
  max-height: 0;
  opacity: 0;
}

.menu-slide-enter-to,
.menu-slide-leave-from {
  max-height: 500px;
  opacity: 1;
}

/* Main Content Styles */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-bar {
  height: 70px;
  background: linear-gradient(135deg, 
    rgba(45, 55, 72, 0.98) 0%,
    rgba(55, 65, 85, 0.98) 100%
  );
  border-bottom: 2px solid rgba(255, 182, 193, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.top-bar::before {
  content: '🏕️';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  opacity: 0.3;
  animation: float 3s ease-in-out infinite;
}

.top-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(255, 182, 193, 0.6) 0%,
    rgba(135, 206, 250, 0.6) 50%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #FFB6C1, #87CEEB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 10px rgba(255, 182, 193, 0.3);
  filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.5));
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  box-shadow: 0 0 10px var(--color-accent-cyan);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* User Menu Styles */
.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 70, 85, 0.2);
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.user-menu:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 182, 193, 0.5);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 193, 0.5);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.username {
  color: var(--color-accent-cyan);
  font-weight: 600;
  font-size: 14px;
}

.badge-admin {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ff4655, #ff7b85);
  color: #fff;
  align-self: flex-start;
}

.dropdown-arrow {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  transition: transform 0.3s;
}

.user-menu:hover .dropdown-arrow {
  transform: translateY(2px);
}

/* 用户下拉菜单 */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(45, 55, 72, 0.98);
  border: 1px solid rgba(255, 182, 193, 0.3);
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s;
}

.dropdown-item:hover {
  background: rgba(255, 182, 193, 0.2);
  color: #FFB6C1;
}

.dropdown-item.danger:hover {
  background: rgba(255, 70, 85, 0.2);
  color: #ff4655;
}

.item-icon {
  font-size: 18px;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 182, 193, 0.2);
  margin: 4px 0;
}

/* 下拉菜单动画 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: rgba(45, 55, 72, 0.98);
  border: 2px solid rgba(255, 182, 193, 0.3);
  border-radius: 12px;
  padding: 30px;
  min-width: 500px;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content h3 {
  color: #FFB6C1;
  font-size: 24px;
  margin-bottom: 24px;
  text-align: center;
}

/* 个人信息头像部分 */
.profile-avatar-section {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 182, 193, 0.1);
  border-radius: 8px;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 182, 193, 0.5);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder-large {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-weight: bold;
  font-size: 36px;
}

.avatar-upload {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  margin-bottom: 8px;
}

.upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.upload-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* 密码修改区域 */
.password-section {
  margin: 24px 0;
  padding: 20px;
  background: rgba(255, 182, 193, 0.05);
  border: 1px solid rgba(255, 182, 193, 0.2);
  border-radius: 8px;
}

.password-section h4 {
  color: #FFB6C1;
  font-size: 16px;
  margin-bottom: 16px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 182, 193, 0.3);
  border-radius: 6px;
  color: white;
  font-size: 14px;
  transition: all 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: rgba(255, 182, 193, 0.6);
  background: rgba(255, 255, 255, 0.15);
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-group-checkbox {
  margin-bottom: 20px;
}

.form-group-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.form-group-checkbox input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn:not(.btn-primary) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 182, 193, 0.3);
}

.btn:not(.btn-primary):hover {
  background: rgba(255, 255, 255, 0.15);
}

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  background: var(--color-bg-primary);
  position: relative;
}

/* 摇曳露营主题装饰 */
.page-content::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 182, 193, 0.15), transparent);
  pointer-events: none;
  z-index: 0;
}

.page-content::after {
  content: '🌲 🏔️ ⭐';
  position: fixed;
  bottom: 20px;
  right: 30px;
  font-size: 24px;
  opacity: 0.1;
  pointer-events: none;
  letter-spacing: 10px;
  z-index: 0;
}
</style>
